import { ChevronLeft, ChevronRight } from "lucide-react";
import DocsBreadcrumb from "../../components/Breadcrumb";
import Pagination from "../../components/Pagination";
import { Typography } from "../../components/Typography";
import EditWith from "../../components/EditWith";
import { formatDate2 } from "../../node/utils";
import type { TocItem } from "../../node/types";
import { Footer } from "../../components/Footer";
import Toc from "../../components/Toc";

interface DocsPageProps {
  slug: string[];
  title: string;
  description?: string;
  date?: string;
  /** SSR'd MDX content HTML — rendered as its own root so client hydration
   * (separate island root) matches useId-based ids. */
  content: string;
  tocs: TocItem[];
  filePath: string;
  repoUrl?: string;
  /** Build-time slug keying into the bundled mdxModules manifest (client.ts). */
  mdxSlug?: string;
  /** Dev-only pre-compiled source for the legacy MDXRemote eval path. */
  compiledSource?: string;
}

export default function DocsPage({
  slug,
  title,
  description,
  date,
  content,
  tocs,
  filePath,
  repoUrl,
  mdxSlug,
  compiledSource,
}: DocsPageProps) {
  const pathname = slug.join("/");
  const tocsJson = JSON.stringify(tocs);

  return (
    <div className="flex w-full flex-1 px-0 pb-4 lg:h-[calc(100vh-4rem)] lg:px-8 lg:pb-8">
      <div
        id="scroll-container"
        className="bg-base-100 border-base-300 relative flex w-full flex-col items-start rounded-b-3xl border shadow-md max-lg:scroll-p-54 lg:h-full lg:flex-row lg:overflow-y-auto lg:rounded-xl"
      >
        {/* Mobile bar - island */}
        <div
          id="mobile-bar-island"
          className="sticky top-0 z-50 w-full lg:hidden"
          data-tocs={tocsJson}
          data-title={title}
          data-repo={repoUrl || ""}
        />

        <div className="flex w-full flex-col lg:flex-row 2xl:mx-auto 2xl:max-w-[1300px]">
          <div
            className={`w-full min-w-0 ${tocs.length > 0 ? "flex-[7]" : "mx-auto max-w-[820px]"} px-4 py-6 lg:px-12 lg:py-10`}
          >
            <DocsBreadcrumb paths={slug} />
            <Typography>
              <h1 className="-mt-0.5 text-3xl">{title}</h1>
              {description && (
                <p className="text-muted-foreground -mt-4 text-[16.5px]">{description}</p>
              )}
              <div
                id="mdx-content-island"
                data-mdx-slug={mdxSlug}
                dangerouslySetInnerHTML={{ __html: content }}
              />
              {compiledSource && (
                <script
                  id="mdx-compiled-source"
                  type="application/json"
                  dangerouslySetInnerHTML={{
                    __html: JSON.stringify(compiledSource).replace(/<\//g, "\\u003C/"),
                  }}
                />
              )}
              <div className="border-base-300 my-8 flex items-center border-b-2 border-dashed">
                <EditWith className="text-muted-foreground" filePath={filePath} />
                {date && (
                  <p className="text-muted-foreground ml-auto text-[13px]">
                    Last updated {formatDate2(date)}
                  </p>
                )}
              </div>
              <Pagination
                pathname={pathname}
                prevIcon={<ChevronLeft className="h-3 w-3" />}
                nextIcon={<ChevronRight className="h-3 w-3" />}
              />
              <Footer />
            </Typography>
          </div>

          {/* Desktop TOC - SSR rendered */}
          {tocs.length > 0 && (
            <div
              id="toc-island"
              data-tocs={tocsJson}
              className="sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[240px] flex-[3] self-start lg:flex lg:px-4 lg:py-6"
            >
              <Toc tocs={tocs} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}